<template>
  <div :class="havedataqty=='3'?'divheight3':(havedataqty=='2'?'divheight2':'divheight1')">
      <div :class="havedataqty=='3'?'divclass3':(havedataqty=='2'?'divclass2':'divclass1')" v-if="fewerdata.length>0">
          <div style="height:100%">
              <div style="font-weight:800;color:red;height:19px">提示：以下商品已低于安全库存，请及时采购或请购！</div>
              <div style="width:100%;height:calc(100% - 19px)">
                  <div style="height:100%">
                      <vxe-table show-overflow ref="xTable1" :data.sync="fewerdata" height="auto" width="100%" border size="mini" :select-config="{ reserve: true }" show-header-overflow highlight-current-row highlight-hover-row resizable stripe header-align="center" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }" key="1">
                          <vxe-table-column type="index" title="NO." width="40"></vxe-table-column>
                          <vxe-table-column field="itemgroupname" title="商品组" width="90"></vxe-table-column>
                          <vxe-table-column field="itemcode" title="商品编号" width="60"></vxe-table-column>
                          <vxe-table-column field="itemname" title="商品名称" width="120"></vxe-table-column>
                          <vxe-table-column field="cp_shouldpur" title="应采购量" width="60" align="center"></vxe-table-column>
                          <vxe-table-column field="unit" title="单位" width="50" align="center"></vxe-table-column>
                          <vxe-table-column field="spec" title="规格" width="60"></vxe-table-column>
                          <vxe-table-column field="vendorname" title="供应商" width="100"></vxe-table-column>
                          <vxe-table-column field="ministock" title="安全库存" width="60" align="right" header-align="center"></vxe-table-column>
                          <vxe-table-column field="maxstock" title="最高库存" width="60" align="right" header-align="center"></vxe-table-column>
                          <vxe-table-column field="safestock" title="常备库存" width="60" align="right" header-align="center"></vxe-table-column>
                          <!-- <vxe-table-column field="stock" title="当前库存" width="70" align="right" header-align="center"></vxe-table-column> -->
                          <vxe-table-column field="qty" title="当前库存" width="60" align="right" header-align="center"></vxe-table-column>
                          <vxe-table-column field="miniunit" title="最小单位" width="60" align="center"></vxe-table-column>
                          <vxe-table-column field="itemclassname" title="商品分类" width="100"></vxe-table-column>
                      </vxe-table>
                  </div>
              </div>
          </div>
      </div>
      <div :class="havedataqty=='3'?'divclass3':(havedataqty=='2'?'divclass2':'divclass1')" v-if="exceeddata.length>0">
          <div style="font-weight:800;color:red;height:19px">提示：以下商品已高于最高库存，请暂停采购或请购！</div>
          <div style="width:100%;height:calc(100% - 19px)">
              <div style="height:100%">
                  <vxe-table show-overflow ref="xTable2" :data.sync="exceeddata" height="auto" width="100%" border size="mini" :select-config="{ reserve: true }" show-header-overflow highlight-current-row highlight-hover-row resizable stripe header-align="center" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }" key="2">
                      <vxe-table-column type="index" title="NO." width="40"></vxe-table-column>
                      <vxe-table-column field="itemgroupname" title="商品组" width="90"></vxe-table-column>
                      <vxe-table-column field="itemcode" title="商品编号" width="60"></vxe-table-column>
                      <vxe-table-column field="itemname" title="商品名称" width="120"></vxe-table-column>
                      <vxe-table-column field="exceedqty" title="超限数量" width="60" align="center"></vxe-table-column>
                      <vxe-table-column field="unit" title="单位" width="50" align="center"></vxe-table-column>
                      <vxe-table-column field="spec" title="规格" width="60"></vxe-table-column>
                      <vxe-table-column field="vendorname" title="供应商" width="100"></vxe-table-column>
                      <vxe-table-column field="ministock" title="安全库存" width="60" align="right" header-align="center"></vxe-table-column>
                      <vxe-table-column field="maxstock" title="最高库存" width="60" align="right" header-align="center"></vxe-table-column>
                      <vxe-table-column field="safestock" title="常备库存" width="60" align="right" header-align="center"></vxe-table-column>
                      <!-- <vxe-table-column field="stock" title="当前库存" width="70" align="right" header-align="center"></vxe-table-column> -->
                      <vxe-table-column field="qty" title="当前库存" width="60" align="right" header-align="center"></vxe-table-column>
                      <vxe-table-column field="miniunit" title="最小单位" width="60" align="center"></vxe-table-column>
                      <vxe-table-column field="itemclassname" title="商品分类" width="100"></vxe-table-column>
                  </vxe-table>
              </div>

          </div>
      </div>
      <div :class="havedataqty=='3'?'divclass3':(havedataqty=='2'?'divclass2':'divclass1')" v-if="expirydata.length>0">
          <div style="height:100%">
              <div style="font-weight:800;color:red;height:19px">提示：以下商品已过期或快过期，请予以关注！</div>
              <div style="width:100%;height:calc(100% - 19px)">
                  <div style="height:100%">
                      <vxe-table show-overflow ref="xTable3" :data.sync="expirydata" height="auto" width="100%" border size="mini" :select-config="{ reserve: true }" show-header-overflow resizable header-align="center" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }" key="3" :row-class-name="rowClassName" class="mytable-style">
                          <vxe-table-column type="index" title="NO." width="40"></vxe-table-column>
                          <vxe-table-column field="warehousename" title="仓库" width="90"></vxe-table-column>
                          <vxe-table-column field="itemgroupname" title="商品组" width="90"></vxe-table-column>
                          <vxe-table-column field="itemcode" title="商品编号" width="80"></vxe-table-column>
                          <vxe-table-column field="itemname" title="商品名称" width="120"></vxe-table-column>
                          <vxe-table-column field="lotno" title="批号" width="80"></vxe-table-column>
                          <vxe-table-column field="spec" title="规格" width="50"></vxe-table-column>
                          <vxe-table-column field="pastdueday" title="距过期(天)" width="70" align="right" header-align="center">
                              <template v-slot="{row}">
                                  {{row.pastdueday>0?row.pastdueday:"已过期"}}
                              </template>
                          </vxe-table-column>
                          <vxe-table-column field="qty" title="库存" width="60" align="right" header-align="center"></vxe-table-column>
                          <vxe-table-column field="miniunit" title="单位" width="50" align="center"></vxe-table-column>
                          <vxe-table-column field="expirydate" title="有效期" width="120"></vxe-table-column>
                          <vxe-table-column field="vendorname" title="供应商" width="200"></vxe-table-column>
                          <vxe-table-column field="itemclassname" title="商品分类" width="100"></vxe-table-column>
                      </vxe-table>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "rm_invalert",
  props: {
      expirydata: { type: Array },
      fewerdata: { type: Array },
      exceeddata: { type: Array },
      havedataqty: { type: Number },
  },
  data() {
      return {};
  },
  created() {},
  mounted() {},
  methods: {
      rowClassName({ row, rowIndex }) {
          if (row.pastdueday > 0) {
              return "row-yellow";
          } else {
              return "row-red";
          }
      },
  },
};
</Script>

<style scoped>
.divheight3 {
  height: 500px;
}
.divheight2 {
  height: 400px;
}
.divheight1 {
  height: 350px;
}
.divclass3 {
  height: 33%;
  float: left;
  width: 100%;
  margin-top: 3px;
  margin-bottom: 3px;
}
.divclass2 {
  height: 50%;
  float: left;
  width: 100%;
  margin-top: 3px;
  margin-bottom: 3px;
}
.divclass1 {
  height: 100%;
  float: left;
  width: 100%;
  margin-top: 3px;
  margin-bottom: 3px;
}
/deep/ .mytable-style .vxe-body--row.row-yellow {
  background-color: yellow;
}
/deep/.mytable-style .vxe-body--row.row-red {
  background-color: red;
}
</style>